/*
 * 饼图组件
 * @Author: ljb
 * @Date: 2018-06-07 15:10:47
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-25 11:15:26
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .chart {
        width: 95%;
		padding-top: 20px;
		box-sizing: border-box;
    }

</style>
<template>
	<div
		:id="unit_id"
		:style="{height: `${chart_option[pieType].height}px` }"
		class="chart"/>
</template>

<script>

import echarts from 'echarts';

export default {
	name: 'PieChart',
	props: {
		values: {
			type: Array,
			default() {
				return [];
			},
		},
		unitIndex: {
			type: String,
			default() {
				return 0;
			},
		},
		seriesName: {
			type: String,
			default() {
				return '';
			},
		},
		pieType: {
			type: String,
			default() {
				return 'hm';
			},
		},
		colors: {
			type: Array,
			default() {
				return ['#E7BCF2', '#37A2DA', '#96BFFF', '#61DEE2'];
			},
		},
		keyName: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			unit_id: `pie_${this.unitIndex}`,
			pie_chart: null, // 饼图
			chart_option: {
				hm: {
					height: 250,
					series_radius: '80%',
					series_center: ['60%', '50%'],
				},
				wax: {
					height: 522,
					series_radius: '90%',
					series_center: ['50%', '50%'],
				},
			},
		};
	},
	watch: {
		values() {
			this.formatData();
		},
	},
	mounted() {
		this.pie_chart = echarts.init(document.getElementById(this.unit_id));

		this.formatData();
		this.pie_chart.on('click', (params) => {
			this.$emit('click', params);
		});
	},
	methods: {

		/**
         * 初始化饼图
         * @param  {string} series_name {饼图名称}
         * @param  {array} legend_data {饼图选项数组}
         * @param  {array} series_data {饼图展示数据数组}
         * @param  {Object} chart       {需要进行初始化的饼图}
         * @return {undefined}
         */
		initPineChart({ series_name, legend_data, series_data }) {
			const self = this;
			const option = {
				title: {
					text: series_name,
					x: '40px',
					y: '0',
					textStyle: {
						fontWeight: 400,
						color: '#333',
					},
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					x: '40px',
					y: '30px',
					data: legend_data,
					itemGap: 20,
					textStyle: {
						color: '#666',
					},
				},
				tooltip: {
					trigger: 'item',
					formatter: `{a} <br/>{b} : {c}${self.$t('common.people')} ({d}%)`,
				},
				series: [
					{
						name: series_name,
						type: 'pie',
						radius: this.chart_option[this.pieType].series_radius,
						center: this.chart_option[this.pieType].series_center,
						label: {
							normal: {
								position: 'inner',
								formatter: `{c}${self.$t('common.people')}`,
							},
						},
						labelLine: {
							normal: {
								show: false,
							},
						},
						tooltip: {
							'background-color': 'blue',
						},
						data: series_data,
					},
				],
				color: this.colors,
			};

			this.pie_chart.setOption(option);
		},

		/**
         * 格式化数据
         * @return {undefined}
         */
		formatData() {
			const pine_option = {
				series_name: this.seriesName || '',
				legend_data: [],
				series_data: [],
			};
			// Object.keys(this.values).forEach((key) => {
			this.values.forEach((item) => {
				// const value = this.values[key];
				const param = {
					value: item.count,
					name: item[this.keyName],
				};

				pine_option.legend_data.push(item[this.keyName]);
				pine_option.series_data.push(param);
			});
			// console.log(pine_option);
			this.initPineChart(pine_option);
		},

	},
};
</script>
